<template>
    <div class="box">
        <div class="messagea">
            <div class="btn" @click="showPopup">
                <img src="../assets/images/message.svg" alt="">
            </div>
            <van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }" class="content">
                <div class="title">评论</div>
                <div class="details" v-for="item in messageaData" :key="item">
                    <div class="detail">
                        <div class="user-img">
                            <img src="../assets/images/1.png" alt="">
                        </div>
                        <div class="content-detail">
                            <div class="user-name">
                                <span>{{ item.user_name }}</span>
                            </div>
                            <div class="user-commit">
                                <span>{{ item.content }}</span>
                            </div>
                        </div>

                    </div>
                </div>
            </van-popup>

        </div>
    </div>
</template>
  
<script>
import { ref } from 'vue'
import http from '../tools/axios';
export default {
    setup() {
        const show = ref(false); // 控制弹出框的显示和隐藏
        const currentUrl = window.location.href;
        const cook_book_id = currentUrl.substring(currentUrl.lastIndexOf('/') + 1);
        const messageaData = ref([
            {"user_name":"uuuu","content":"contsnn"},
            {"user_name":"uuuu","content":"contsnn"},
            {"user_name":"uuuu","content":"contsnn"}
        ]);
        const showPopup = () => {
            show.value = true; // 显示弹出框
            http.get('/message/info', { params: { "cook_book_id": cook_book_id } })
            .then((res) => {
                    console.log(res);
                    if (res.data.code === 200) {
                        messageaData.value = res.data.data;
                        console.log(messageaData.value);
                    } else {
                        console.log('error');
                    }
                })
        };
        const closePopup = () => {
            show.value = false; // 关闭弹出框
        };
        return {
            show,
            showPopup,
            closePopup,
        };
    },
};
</script>
  
<style lang="scss">
.box {
    width: 60px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .messagea {
        .btn {

            width: 30px;
            height: 30px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .content {
            .title {
                margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .details {
                margin-top: 20px;
                margin-left: 10px;

                .detail {
                    display: flex;

                    .user-img {
                        width: 40px;
                        height: 40px;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 90px;
                        }
                    }

                    .content-detail {
                        display: flex;
                        flex-direction: column;
                        margin-left: 10px;

                        .user-name {
                            span {
                                font-size: 13px;
                                font-weight: 300;
                            }
                        }

                        .user-commit {
                            margin-top: 6px;

                            span {
                                font-size: 15px;
                                font-weight: 500;
                            }
                        }
                    }
                }
            }

        }

    }
}</style>